<html>
<head>
    <style>
        html{
            background-color: white;
        }
        #wrap{
            height: 300px;
            width:300px;
            border:1px dashed black;
            
        }
    </style>
</head>
<body>
    <button draggable="true">按钮</button>
    <div id='wrap'>
        afsd
    </div>
    <script>
        let btn = document.querySelector('button');

        btn.ondragstart = function () {
            console.log('开始')
            this.style.borderColor = 'red'
        }
        btn.ondrag = function () {
            // console.log('持续拖动')
        };
        btn.ondragend = function () {
            console.log('ondragend')
            this.style.borderColor = ''
        }
        let target = document.querySelector('#wrap');
        target.ondragenter = function (e) {
            e.preventDefault()
            console.log('进入')
        }
        target.ondragover = function (e) {
            e.preventDefault() 
        }
        target.ondragleave = function (e) {
            console.log('离开')
        }
        target.ondrop = function () {
            console.log('放置')
        }


    </script>
</body>

</html>